<template>
    <div class="take-meals">
        <div class="take-top cashier-border">
            <div class="meals-total float-left">
                <div class="meal-item">
                    <div>{{ allSize }}</div>
                </div>
                <span>点餐总数</span>
            </div>
            <div class="meals-pending float-left">
                <div class="meal-item">
                    <div>{{ pendingSize }}</div>
                </div>
                <span>待取餐数</span>
            </div>
            <div class="meals-processed float-left">
                <div class="meal-item">
                    <div>{{ processedSize }}</div>
                </div>
                <span>已取餐数</span>
            </div>
        </div>
        <div class="take-down cashier-border">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="全部" name="all">
                    <div class="meals-appear">
                        <div class="meal" v-for="meal in allMeals" :class="{'pending-meal':meal.state === '待取餐','processed-meal':meal.state === '已取餐'}">
                            <div class="meal-code">取餐码: {{ meal.id }}</div>
                            <el-divider class="hr"></el-divider>
                            <div class="meal-foods">
                                <table>
                                    <tbody>
                                    <tr v-for="takeout in meal.takeoutFoods">
                                        <td>{{ takeout.food.name }}</td>
                                        <td>x{{ takeout.count }}</td>
                                        <td><i class="fa fa-jpy"></i>{{ takeout.food.price }}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <el-divider class="hr"></el-divider>
                            <div class="meal-info">
                                <span class="example-count float-left">共{{ meal.takeoutFoods.length }}例</span>
                                <span class="total-price float-right">共计：<i class="fa fa-jpy"></i>{{ meal.totalPrice }}</span>
                            </div>
                            <div class="take-meal" v-if="meal.state === '待取餐'">
                                <el-button type="primary" plain>取 餐</el-button>
                            </div>
                            <div class="take-meal" v-else>
                                <img src="../../assets/imgs/takeMeal.png" alt="">
                                <div>已取餐</div>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="待取餐" name="pending">
                    <div class="meals-appear">
                        <div class="meal pending-meal" v-for="meal in noneMeals">
                            <div class="meal-code">取餐码:{{ meal.id }} </div>
                            <el-divider class="hr"></el-divider>
                            <div class="meal-foods">
                                <table>
                                    <tbody>
                                    <tr v-for="takeout in meal.takeoutFoods">
                                        <td>{{ takeout.food.name }}</td>
                                        <td>x{{ takeout.count }}</td>
                                        <td><i class="fa fa-jpy"></i>{{ takeout.food.price }}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <el-divider class="hr"></el-divider>
                            <div class="meal-info">
                                <span class="example-count float-left">共{{ meal.takeoutFoods.length }}例</span>
                                <span class="total-price float-right">共计：<i class="fa fa-jpy"></i>{{ meal.totalPrice }}</span>
                            </div>
                            <div class="take-meal">
                                <el-button type="primary" plain @click="takeMeal(meal.id)">取 餐</el-button>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="已取餐" name="processed">
                    <div class="meals-appear">
                        <div class="meal processed-meal" v-for="meal in takeMeals">
                            <div class="meal-code">取餐码: {{ meal.id }}</div>
                            <el-divider class="hr"></el-divider>
                            <div class="meal-foods">
                                <table>
                                    <tbody>
                                    <tr v-for="takeout in meal.takeoutFoods">
                                        <td>{{ takeout.food.name }}</td>
                                        <td>x{{ takeout.count }}</td>
                                        <td><i class="fa fa-jpy"></i>{{ takeout.food.price }}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <el-divider class="hr"></el-divider>
                            <div class="meal-info">
                                <span class="example-count float-left">共{{ meal.takeoutFoods.length }}例</span>
                                <span class="total-price float-right">共计：<i class="fa fa-jpy"></i>{{ meal.totalPrice }}</span>
                            </div>
                            <div class="take-meal">
                                <img src="../../assets/imgs/takeMeal.png" alt="">
                                <div>已取餐</div>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
    export default {
        name: "TakeMeals",
        data() {
            return {
                activeName: 'all',
                allMeals: [],
                noneMeals: [],
                takeMeals: [],
            };
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            loadAll(){
                this.$axios.get("/take/all").then(response => {
                    this.allMeals.length = 0;
                    response.data.forEach(meal => {
                        this.allMeals.push(meal);
                    })
                    console.log(this.allMeals)
                })
            },loadNone(){
                this.$axios.get("/take/none").then(response => {
                    this.noneMeals.length = 0;
                    response.data.forEach(meal => {
                        this.noneMeals.push(meal);
                    })
                })
            },loadTake(){
                this.$axios.get("/take/finish").then(response => {
                    this.takeMeals.length = 0;
                    response.data.forEach(meal => {
                        this.takeMeals.push(meal);
                    })
                })
            },
            takeMeal(id){
                let that = this;
                this.$axios.get("/take/take/"+id).then(response => {
                    that.loadAll()
                    that.loadNone()
                    that.loadTake()
                })
            }
        },
        computed: {
            allSize(){
                return this.allMeals.length;
            },
            pendingSize(){
                return this.noneMeals.length;
            },
            processedSize(){
                return this.takeMeals.length;
            },

        },
        created() {
            this.loadAll();
            this.loadNone();
            this.loadTake();

        }
    }
</script>

<style scoped>
    @import "../../css/PublicCashier.css";
    @import "../../css/TakeMeals.css";
</style>
